<template>
    <app-layout>
        <view class="all">
            <app-goods-banner :pic-list="bargain.pic_url" :share="bargain.share"
                              :goods_id="bargain.goods_id"
                              sign="bargain"
                              :video-url="bargain.video_url"></app-goods-banner>
            <view v-if="begin_list || end_list" class="main-center cross-center time-bg">
                <icon class="icon-time" :style="{'background-image': `url(${appImg.bargain_time})`}"></icon>
                <view class="dir-left-nowrap time-desc main-center cross-center">
                    <block v-if="begin_list">
                        <view class="box-grow-0">距活动开始</view>
                        <block v-if="begin_list.d">
                            <view class="time-box">{{begin_list.d}}</view>
                            <view>天</view>
                        </block>
                        <view class="time-box">{{begin_list.h}}</view>
                        <view>:</view>
                        <view class="time-box">{{begin_list.m}}</view>
                        <view>:</view>
                        <view class="time-box">{{begin_list.s}}</view>
                    </block>
                    <block v-if="!begin_list && end_list">
                        <view class="box-grow-0">距活动结束</view>
                        <block v-if="end_list.d">
                            <view class='time-box'>{{end_list.d}}</view>
                            <view>天</view>
                        </block>
                        <view class='time-box'>{{end_list.h}}</view>
                        <view>:</view>
                        <view class='time-box'>{{end_list.m}}</view>
                        <view>:</view>
                        <view class='time-box'>{{end_list.s}}</view>
                    </block>
                </view>
            </view>
            <view class="goods" v-if="bargain">
                <view class="t-omit-three name">{{bargain.name}}</view>
                <view class="dir-left-nowrap cross-center">
                    <view class="detail box-grow-1 dir-top-nowrap">
                        <view class="box-grow-0 dir-left-nowrap cross-bottom end">
                            <view>最低</view>
                            <view class="red">￥</view>
                            <view class="red price">{{bargain.min_price}}</view>
                            <view class="del" v-if="isUnderlinePirce == 1">原价{{bargain.price}}</view>
                        </view>
                        <view class="box-grow-0 num dir-left-nowrap">
                            <view>库存:{{bargain.stock}}{{bargain.unit}}</view>
                            <view>已有{{bargain.join_num}}人参与砍价</view>
                        </view>
                    </view>
                    <!-- <view @click="shareClick" class="share box-grow-0 cross-center dir-top-nowrap">
                        <icon class="icon"></icon>
                        <view class="share">分享</view>
                    </view> -->
                    <view>
                        <app-share-qr-code :url="poster + `&goods_id=` + goods_id" v-model="shareShow"></app-share-qr-code>
                    </view>
                </view>
            </view>
            <view class="attr-box">
                <view class="attr dir-left-nowrap">
                    <view class="box-grow-0 left cross-center dir-top-nowrap">
                        <view>商品信息</view>
                    </view>
                    <view class="box-grow-1 right dir-left-wrap">
                        <view class="attr-item" v-for="(item, index) in bargain.select_attr_group" :key="index">
                            {{item.attr_group_name + ':' + item.attr_name}}
                        </view>
                    </view>
                </view>
            </view>
            <view class="service">
                <app-service :list="bargain.service"></app-service>
            </view>
            <view class="activity" v-if="bargain.bargain_info">
                <view class="dir-left-nowrap cross-center">
                    <image class="box-grow-0 user-img" :src="userInfo.avatar" load-lazy></image>
                    <view class="dir-top-nowrap">
                        <view class="dir-left-nowrap">
                            <view>距本次砍价结束仅剩</view>
                            <view class="yellow">
                                <block v-if="finish_list">
                                    {{finish_list.d}}天{{finish_list.h}}：{{finish_list.m}}：{{finish_list.s}}
                                </block>
                                <block v-else>0天0：0：0</block>
                            </view>
                        </view>

                        <view v-if="bargain.bargain_info.now_price == bargain.bargain_info.min_price"
                              class="yellow">已砍至最低价，赶快优惠购买吧！
                        </view>
                        <view class="yellow" v-else>快让你的好友助你一臂之力！</view>
                    </view>
                </view>

                <view class="main-center">
                    <view class="current">当前价￥{{bargain.bargain_info.now_price}}</view>
                </view>
                <view class='progress-box'>
                    <view class='progress-view' :style="{width:bargain.bargain_info.bargain_price_per+'%'}"></view>
                </view>
                <view class='dir-left-nowrap price'>
                    <view class='box-grow-1'>原价￥{{bargain.bargain_info.price}}</view>
                    <view class='box-grow-0'>底价￥{{bargain.bargain_info.min_price}}</view>
                </view>

                <view class='info'>
                    <scroll-view class="user-scroll" scroll-y :scroll-into-view="'user-'+user_index"
                                 scroll-with-animation="true">
                        <block v-for="(v,k) in bargain.bargain_info.list" :key="k">
                            <view class="item dir-left-nowrap cross-center">
                                <image class='box-grow-0' :src="v.avatar" load-lazy></image>
                                <view class="box-grow-1 dir-left-nowrap cross-center">
                                    <view class="nickname">{{v.nickname}}</view>
                                    <view> 小刀一挥帮忙砍了</view>
                                    <view class="red">{{v.price}}</view>
                                    <view>元</view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                </view>
            </view>

            <view class="circuit-label dir-left-nowrap cross-center">
                <icon class="icon-circuit"></icon>
                <view>砍价流程</view>
            </view>
            <view class="circuit-value dir-left-nowrap main-center">
                <block v-for="(v,k) in circuit" :key="k">
                    <view class="cross-center dir-top-nowrap">
                        <image :src="v.url" :class="v.name ? 'icon-circuit-i' : 'icon-circuit-j'"></image>
                        <view class="box-grow-0 name">{{v.name}}</view>
                    </view>
                </block>
            </view>
            <view class="circuit-label dir-left-nowrap cross-center">
                <icon class="icon-circuit"></icon>
                <view>活动说明</view>
            </view>
            <view class="activity-time">
                <view>本活动开始时间{{bargain.begin_time}}</view>
                <view>本活动结束时间{{bargain.end_time}}</view>
            </view>
            <view class="app-goods-marketing">
                <app-goods-marketing :express="bargain.express"></app-goods-marketing>
            </view>

            <view class="circuit-label dir-left-nowrap cross-center">
                <icon class="icon-circuit"></icon>
                <view>商品详情</view>
            </view>
            <view>
                <app-rich-text :content="bargain.detail"></app-rich-text>
            </view>
        </view>
	    <view>
		    <app-empty-bottom :height="Number(120)"></app-empty-bottom>
	    </view>
	    <view>
		    <app-iphone-x>
		    <view class="bargain-goods-bottom main-center cross-center"  slot="empty-area">
			    <block v-if="bargain.bargain_info">
				    <block v-if="bargain.bargain_info.min_price < bargain.bargain_info.now_price">
					    <view @click="submit" class="btn shop">立即购买</view>
					    <view @click="bargainFriend" class="btn friend">找人帮砍</view>
				    </block>
				    <view v-else @click="submit" class="btn">立即购买</view>
			    </block>
			    <block v-else>
                    <view v-if="bargain.stock == 0" class="btn" style="background: #CDCDCD;color: #fff;">已售罄</view>
                    <view v-else @click="subscribe" class="btn">立即砍价</view>
                </block>
		    </view>
		    </app-iphone-x>
	    </view>
    </app-layout>
</template>

<script>
    import {mapState} from 'vuex';
    import appQuickNavigation from "../../../components/page-component/app-quick-navigation/app-quick-navigation";
    import appRichText from "../../../components/basic-component/app-rich/parse.vue";
    import appGoodsBanner from "../../../components/page-component/goods/app-goods-banner.vue";
    import appService from "../../../components/page-component/goods/app-goods-service.vue";
    import appIphonexBottom from "../../../components/page-component/app-iphonex-bottom/app-iphonex-bottom.vue";
    import appShareQrCode
        from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
    import appIphoneX from '../../../components/basic-component/app-iphone-x/app-iphone-x.vue';
    import appEmptyBottom from '../../../components/basic-component/app-empty-bottom/app-empty-bottom.vue';
    import appGoodsMarketing from '../../../components/page-component/goods/app-goods-marketing.vue';

    export default {
        name: "goods",
        components: {appQuickNavigation, appRichText, appGoodsBanner, appService, appShareQrCode, appIphonexBottom, appEmptyBottom, appIphoneX, appGoodsMarketing},
        computed: {
            ...mapState({
                appImg: state => state.mallConfig.plugin.bargain.app_image,
                userInfo: state => state.user.info,
                isUnderlinePrice: state => state.mallConfig.mall.setting.is_underline_price,
            }),
            ...mapState('gConfig', {
                iphone: (data) => {
                    return data.iphone;
                },
                iphoneHeight: (state) => {
                    return state.iphoneHeight;
                },
            })
        },

        data() {
            let timeIntegral;
            return {
                timeIntegral: null,
                goods_id: '',
                bargain: null,
                finish_list: null,
                begin_list: null,
                end_list: null,

                shareShow: false,
                title: '砍价',
                page: 1,

                circuit: [{
                    name: '点击砍价',
                    url: './../image/bargain-click.png',
                }, {
                    name: '',
                    url: './../image/bargain-jiantou.png',
                }, {
                    name: '找人砍价',
                    url: './../image/bargain-help.png',
                }, {
                    name: '',
                    url: './../image/bargain-jiantou.png',
                }, {
                    name: '价格合适',
                    url: './../image/bargain-price.png',
                }, {
                    name: '',
                    url: './../image/bargain-jiantou.png',
                }, {
                    name: '优惠购买',
                    url: './../image/bargain-buy.png'
                }],
                poster: this.$api.bargain.poster,
            }
        },
        onLoad(options) {
            const self = this;
            self.$store.dispatch('user/info');
            self.goods_id = options.goods_id;

            self.$showLoading();
            self.$request({
                url: self.$api.bargain.goods_detail,
                data: {
                    goods_id: self.goods_id,
                }
            }).then(info => {
                self.$hideLoading();
                if (info.code === 0) {
                    self.bargain = info.data.bargain;
                    //定时器
                    if (self.bargain.bargain_info) {
                        let func = function () {
                            if (self.bargain.bargain_info) {
                                [
                                    self.finish_list,
                                    self.begin_list,
                                    self.end_list
                                ] = [
                                    self.setTimeStart(self.bargain.bargain_info.finish_at),
                                    self.setTimeStart(self.bargain.begin_time),
                                    self.setTimeStart(self.bargain.end_time)
                                ];
                            } else {
                                clearInterval(self.timeIntegral);
                            }
                        }
                        func();
                        self.timeIntegral = setInterval(() => {
                            func();
                        },1000)
                    }
                } else {
                    uni.showToast({icon: 'none', title: info.msg});
                }
            }).catch(info => {
                self.$hideLoading();
            });
        },

        onUnload() {
            clearInterval(this.timeIntegral);
        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
            return this.$shareAppMessage({
                title: this.bargain.goods.app_share_title ? this.bargain.goods.app_share_title : this.bargain.name,
                path: '/plugins/bargain/goods/goods',
                imageUrl: this.bargain.goods.app_share_pic ? this.bargain.goods.app_share_pic : this.bargain.cover_pic,
                params: {
                    goods_id: this.bargain.goods_id
                }
            });
        },

        methods: {
            bargainFriend() {
                uni.navigateTo({url: '/plugins/bargain/activity/activity?id=' + this.bargain.bargain_info.bargain_order_id});
            },
            userList() {
                const self = this;
                self.$request({
                    url: self.$api.bargain.goods_detail,
                    data: {
                        goods_id: self.goods_id,
                    }
                }).then(info => {
                    if (info.code === 0) {
                        if (info.data.bargain.bargain_info) {
                            let user_list = e.data.bargain.bargain_info.list;

                            self.setData({
                                user_list: user_list,
                            })
                            if (this.finishTime) {
                                setTimeout(() => {
                                    this.userList();
                                }, 5000);
                            }
                        }
                    }
                });
            },

            setTimeStart: function (e) {
                let time = e.replace(/-/g, '/');
                let diff_time = parseInt((new Date(time).getTime() - new Date().getTime()) / 1000)
                let day = 0, hour = 0, minute = 0, second = 0;

                if (diff_time > 0) {
                    day = Math.floor(diff_time / (60 * 60 * 24));
                    hour = Math.floor(diff_time / (60 * 60)) - (day * 24);
                    minute = Math.floor(diff_time / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(diff_time) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                } else {
                    return null;
                }
                return {
                    d: day,
                    h: hour < 10 ? ('0' + hour) : hour,
                    m: minute < 10 ? ('0' + minute) : minute,
                    s: second < 10 ? ('0' + second) : second,
                };
            },

            subscribe: function () {
                const self = this;
                this.$subscribe(this.bargain.template_message).then(res => {
                    let tpl_id = self.bargain.template_message[0];
                    if (res[tpl_id] == 'accept') {
                        uni.showModal({
                            title: '提示',
                            content: '订阅成功',
                            showCancel: false,
                            success(res) {
                                 self.save();
                            }
                        })
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: '取消订阅',
                            showCancel: false,
                            success(res) {
                                self.save();
                            }
                        })
                    }
                }).catch(res => {
                    self.save();
                });
            },

            save: function () {
                const self = this;
                self.$showLoading();
                self.$request({
                    url: self.$api.bargain.bargain_submit,
                    data: {
                        goods_id: self.bargain.goods_id
                    },
                }).then(info => {
                    self.$hideLoading();
                    if (info.code == 0) {
                        self.bargainResult(info);
                    } else {
                        uni.showToast({icon: 'none', title: info.msg});
                    }
                }).catch(e => {
                    self.$hideLoading();
                });
            },

            bargainResult(data) {
                const self = this;
                self.$showLoading();
                self.$request({
                    url: self.$api.bargain.bargain_result,
                    data: {
                        queueId: data.data.queueId,
                        token: data.data.token,
                    },
                }).then(info => {
                    if (info.code === 0) {
                        if (info.data.retry) {
                            setTimeout(() => {
                                self.bargainResult(data);
                            }, 1000);
                            return;
                        }
                        self.$hideLoading();
                        uni.redirectTo({
                            url: '/plugins/bargain/activity/activity?order_id=' + info.data.bargain_order_id,
                        })
                    } else {
                        self.$hideLoading();
                        uni.showToast({icon: 'none', title: info.msg});
                    }
                }).catch(e => {
                    self.$hideLoading();
                });
            },

            submit: function () {
                const bargain = this.bargain;
                const mchList = [{
                    "mch_id": 0,
                    "bargain_order_id": bargain.bargain_info.bargain_order_id,
                    "goods_list": [{
                        "id": bargain.goods_id,
                        "attr": [],
                        "num": 1,
                        "cart_id": 0,
                        "goods_attr_id": bargain.goods_attr_id
                    }]
                }];
                uni.navigateTo({
                    url: '/pages/order-submit/order-submit?mch_list=' +
                        JSON.stringify(mchList) +
                        '&preview_url=' + encodeURIComponent(this.$api.bargain.order_preview) +
                        '&submit_url=' + encodeURIComponent(this.$api.bargain.order_submit)
                });
            },

            shareClick() {
                this.shareShow = true;
            }
        }
    }
</script>

<style scoped lang="scss">
    .all {
        margin-bottom: #{120rpx};
    }

    .time-bg {
        width: 100%;
        margin-top: #{24rpx};
        height: #{80rpx};
        background: #FFFFFF;

        .icon-time {
            position: relative;
            height: 100%;
            width: #{710rpx};
            background-repeat: no-repeat;
            background-size: 100% auto;
        }

        .time-desc {
            position: absolute;
            font-size: #{26rpx};
            left: 0;
            right: 0;
            margin: 0 auto;
            color: #353535;
        }

        .time-box {
            height: #{42rpx};
            color: #fff;
            width: #{46rpx};
            line-height: #{42rpx};
            text-align: center;
            background-color: #666;
            border-radius: #{4rpx};
            margin: 0 #{10rpx};
        }
    }

    .activity {
        font-size: #{28rpx};
        color: #353535;
        padding: #{24rpx};
        background: #FFFFFF;

        .user-img {
            height: #{96rpx};
            width: #{96rpx};
            display: block;
            margin-right: #{34rpx};
        }

        .yellow {
            color: #ff8c40;
        }

        .current {
            margin-top: #{20rpx};
            font-size: #{38rpx};
            color: #ff4544;
        }

        .progress-box {
            width: 100%;
            height: #{40rpx};
            border-radius: #{20rpx};
            border: #{1px} solid #ff5c5c;
            overflow: hidden;
            margin-top: #{28rpx};
            margin-bottom: #{16rpx};
        }

        .progress-view {
            width: 50%;
            height: 100%;
            border-radius: #{20rpx};
            background-color: #ff9f9f;
        }

        .price {
            font-size: #{26rpx};
            color: #666666;
            padding-bottom: #{20rpx};
        }
    }

    .goods {
        background: #FFFFFF;
        padding: #{32rpx} #{24rpx} #{40rpx};
        color: #999999;

        .name {
            color: #353535;
            margin-bottom:#{32rpx};
            font-size: #{32rpx};
        }

        .detail {
            color: #999999;
            font-size: #{28rpx};

            .end {
                line-height: 1;
            }

            .red {
                color: #ff4544;
            }

            .price {
                font-size: #{40rpx};
            }

            .del {
                margin-left: #{16rpx};
                text-decoration: line-through;
            }

            .num {
                margin-top: #{32rpx};
            }

            .num view:first-child {
                margin-right: #{32rpx};
            }
        }

        .share {
            margin-top: #{24rpx};

            .icon {
                height: #{40rpx};
                width: #{40rpx};
                background-image: url('../../../static/image/icon/icon-share.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            view {
                font-size: #{22rpx};
                color: #999999;
                margin-top: #{10rpx};
            }
        }
    }

    .circuit-label {
        height: #{88rpx};
        margin-top: #{16rpx};
        color: #ff4544;
        font-size: #{32rpx};
        background: #FFFFFF;
        border-bottom: #{1px} solid #e2e2e2;

        .icon-circuit {
            height: #{34}rpx;
            width: #{34rpx};
            background-image: url("./../image/bargain-flow.png");
            background-repeat: no-repeat;
            background-size: 100% auto;
            margin: 0 #{16rpx};
        }
    }

    .user-scroll {
        max-height: #{264rpx};
    }

    .info {
        width: 100%;
        border-radius: #{16rpx};
        background-color: #fff7f7;
        padding: #{32rpx} #{24rpx};

        .nickname {
            max-width: #{200rpx};
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .red {
            color: #ff4544;
        }

        image {
            width: #{64rpx};
            height: #{64rpx};
            margin-right: #{24rpx};
        }


        .item {
            margin-bottom: #{32rpx};
        }

        .item:last-child {
            margin-bottom: 0;
        }
    }

    .circuit-value {
        padding-top: #{20rpx};
        background: #FFFFFF;
        padding-bottom: #{30rpx};

        .icon-circuit-i {
            height: #{72rpx};
            width: #{72rpx};
        }

        .name {
            font-size: #{26rpx};
            color: #999999;
            margin-top: #{20rpx};
        }

        .icon-circuit-j {
            margin-top: #{19rpx};
            height: #{34rpx};
            width: #{52rpx};
        }

        > view {
            margin: 0 #{10rpx}
        }
    }

    .activity-time {
        padding-bottom: #{40rpx};
        background: #FFFFFF;
        padding-left: #{20rpx};

        view {
            padding-top: #{28rpx};
            font-size: #{28rpx};
            color: #666666;
        }

        view:before {
            content: '●';
            margin-right: #{20rpx};
        }
    }

    .bargain-goods-bottom {
        height: #{120rpx};
        width: 100%;
        background: #FFFFFF;
        .btn {
            color: #FFFFFF;
            font-size: #{32rpx};
            height: #{80rpx};
            line-height: #{80rpx};
            text-align: center;
            width: #{702rpx};
            border-radius: #{40rpx};
            background: linear-gradient(#ff9292, #fc6969);
        }

        .btn.shop {
            width: #{346rpx};
        }

        .btn.friend {
            width: #{346rpx};
            margin-left: #{12rpx};
            background: linear-gradient(#ffc46b, #ffa13c);
        }
    }

    .service {
        margin-top: #{20rpx};
    }

    .attr-box {
        padding: #{0 24rpx};
        background: #ffffff;
        .attr {
            padding: #{28rpx 0};
            border-top: #{1rpx solid #eeeeee};

            .left {
                color: #666666;
                margin-right: #{24rpx};
                font-size: $uni-font-size-weak-one;

                view {
                    border: #{1rpx solid #666666};
                    padding: #{8rpx 16px};
                    -webkit-border-radius: #{30rpx};
                    -moz-border-radius: #{30rpx};
                    border-radius: #{30rpx};
                }
            }

            .right {
                font-size: $uni-font-size-general-two;
                margin-top: #{10rpx};

                .attr-item {
                    margin-right: #{10rpx};
                }
            }
        }
    }

</style>